<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>新增商家</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>
<div class="app-page">
    <div class="app-page-content">
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <form class="form">
                        <div class="form-item row">
                            <div class="label">
                                <label>商家名称</label>
                            </div>
                            <div class="body">
                                <input type="text" data-name="商家名称" name="companyName" data-rule="required">
                            </div>
                        </div>
                        <div class="form-item row">
                            <div class="label">
                                <label>登录账号</label>
                            </div>
                            <div class="body">
                                <span id="userNamePre" class="userNamePre">admin_</span>
                                <input type="text" data-name="登录账号" name="loginUserName" data-rule="required" style="width: 257px;">
                                <span>&nbsp;&nbsp;&nbsp;商家管理平台默认管理员账号,拥有商家平台的全部权限</span>
                            </div>
                        </div>
                        <div class="form-item row">
                            <div class="label">
                                <label>登录密码</label>
                            </div>
                            <div class="body">
                                <input type="text" data-name="登录密码" name="loginPassword" data-rule="required">
                                <span>&nbsp;&nbsp;&nbsp;6-8位，字母+数字</span>
                            </div>
                        </div>
                        <div class="form-item row" style="align-items: flex-start;">
                            <div class="label">商家logo</div>
                            <div class="body">
                                <div class="upload upload-image" data-input-name="companyLogoUrl" data-limit="1"
                                     th:attr="data-url=@{/ckCompany/upload}" data-fieldname="files" >
                                    <div class="upload-list upload-list-image">
                                    </div>
                                    <div class="upload-tips">只能上传jpg/png文件</div>
                                    <div class="upload-error"></div>
                                    <div class="upload-loading">
                                        <i class="fa fa-cog fa-spin"></i> 图片上传中...
                                    </div>
                                    <div class="input-opacity">
                                        <input type="file" class="input" accept="image/gif,image/jpeg,image/jpg,image/png">
                                        <a class="z-btn z-default"><i class="fa fa-upload"></i> 上传logo</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-item row">
                            <div class="label">
                                <label>营业执照号</label>
                            </div>
                            <div class="body">
                                <input type="text" data-name="营业执照号" name="businessLicenseNo" data-rule="required">
                            </div>
                        </div>
                        <div class="form-item row" style="align-items: flex-start;">
                            <div class="label">营业执照</div>
                            <div class="body">
                                <div class="upload upload-image" data-input-name="businessLicenseUrl" data-limit="1"
                                     th:attr="data-url=@{/ckCompany/upload}" data-fieldname="files">
                                    <div class="upload-list upload-list-image">
                                    </div>
                                    <div class="upload-tips">只能上传jpg/png文件</div>
                                    <div class="upload-error"></div>
                                    <div class="upload-loading">
                                        <i class="fa fa-cog fa-spin"></i> 图片上传中...
                                    </div>
                                    <div class="input-opacity">
                                        <input type="file" class="input" accept="image/gif,image/jpeg,image/jpg,image/png">
                                        <a class="z-btn z-default"><i class="fa fa-upload"></i> 上传正面</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-item row" style="align-items: flex-start;">
                            <div class="label">法人身份证</div>
                            <div class="body">
                                <div class="upload upload-image" data-input-name="legalPersonIdFrontUrl" data-limit="1"
                                     th:attr="data-url=@{/ckCompany/upload}" data-fieldname="files">
                                    <div class="upload-list upload-list-image">
                                    </div>
                                    <div class="upload-tips">只能上传jpg/png文件</div>
                                    <div class="upload-error"></div>
                                    <div class="upload-loading">
                                        <i class="fa fa-cog fa-spin"></i> 图片上传中...
                                    </div>
                                    <div class="input-opacity">
                                        <input type="file" class="input" accept="image/gif,image/jpeg,image/jpg,image/png">
                                        <a class="z-btn z-default"><i class="fa fa-upload"></i> 上传正面</a>
                                    </div>
                                </div>
                                <div class="upload upload-image" data-input-name="legalPersonIdBackUrl" data-limit="1"
                                     th:attr="data-url=@{/ckCompany/upload}" data-fieldname="files">
                                    <div class="upload-list upload-list-image">
                                    </div>
                                    <div class="upload-tips">只能上传jpg/png文件</div>
                                    <div class="upload-error"></div>
                                    <div class="upload-loading">
                                        <i class="fa fa-cog fa-spin"></i> 图片上传中...
                                    </div>
                                    <div class="input-opacity">
                                        <input type="file" class="input" accept="image/gif,image/jpeg,image/jpg,image/png">
                                        <a class="z-btn z-default"><i class="fa fa-upload"></i> 上传反面</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-item row" style="align-items: flex-start;">
                            <div class="label">上传机器码</div>
                            <div class="body">
                                <!-- 上传结果 -->
                                <div class="upload-list-text"></div>
                                <div class="upload upload-file"  data-input-name="excelDeviceCode" data-limit="1"
                                     th:attr="data-url=@{/ckCompany/uploadExcel}" data-fieldname="files" data-upload-success="excelUploadSuccess">
                                    <div class="upload-tips">只能上传Excel文件</div>
                                    <div class="upload-error"></div>
                                    <div class="input-opacity">
                                        <input type="file" class="input" accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                                        <a class="z-btn z-default"><i class="fa fa-upload"></i> 上传文件</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-item row">
                            <div class="label">
                                <label>联系人</label>
                            </div>
                            <div class="body">
                                <input type="text" data-name="联系人" name="contacts" data-rule="required">
                            </div>
                        </div>
                        <div class="form-item row">
                            <div class="label">
                                <label>手机号</label>
                            </div>
                            <div class="body">
                                <input type="text" data-name="手机号" name="mobilePhone" data-rule="required">
                            </div>
                        </div>
                        <div class="z-btn-group" style="margin-bottom:0;">
                            <a class="btn-submit z-btn z-primary">保存</a>
                            <a th:href="@{/ckCompany/listByPage}" class="layer-close z-btn z-default">返回</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/admin-upload.js}"></script>
<script>
    //获取context path
    var context = $("meta[name='ctx']").attr("content") || '';

    // 验证输入密码
    function checkPassword(value) {
        if(value.length < 6 || value.length > 8) {
            return false;
        }
        var reg = new RegExp(/^[A-Za-z0-9]+$/);
        if (!reg.test(value)) {
            return false;
        }
        return true;
    }

    // 验证输入手机号
    function checkMobilePhone(value) {
        var reg = new RegExp(/^[1][3,4,5,7,8,9][0-9]{9}$/);
        if (!reg.test(value)) {
            return false;
        }
        return true;
    }

    // 保存
    var form = $(".form").form({
        submitSelector: ".form .btn-submit",
        msg: function (msg) {
            popup.tipsTop(msg, 'warning');
        },
        submit: function () {
            var data = {
                userNamePre:$('.userNamePre').text()
            };
            $.each($(".form").serializeArray(), function (index, field) {
                if (data[field.name]) {
                    data[field.name] += "," + field.value;
                } else {
                    data[field.name] = field.value;
                }
            });

            // if(!data.excelDeviceCode){
            //     return popup.tipsTop('请上传机器码', 'warning');
            // }

            // 登陆密码验证
            if(!checkPassword(data.loginPassword)) {
                return popup.tipsTop('请重新输入由6-8位字母或数字组成的登陆密码', 'warning');
            }
            // 手机号码验证
            if(!checkMobilePhone(data.mobilePhone)) {
                return popup.tipsTop('请输入11位电话号码', 'warning');
            }

            //

            if (!data.companyLogoUrl) {
                return popup.tipsTop('请上传商家logo', 'warning');
            }
            // 营业执照是否上传
            if (!data.businessLicenseUrl) {
                return popup.tipsTop('请上传营业执照正面照', 'warning');
            }
            // 法人身份证正面照是否上传
            if (!data.legalPersonIdFrontUrl) {
                return popup.tipsTop('请上传法人身份证正面照', 'warning');
            }
            // 法人身份证反面照是否上传
            if (!data.legalPersonIdBackUrl) {
                return popup.tipsTop('请上传法人身份证反面照', 'warning');
            }

            console.log('提交的数据');
            console.log(data);

            // 保存商家详细信息
            $.ajax({
                type: "POST",
                url: context + "/ckCompany/addCompany",
                data: data,
                success: function (obj) {
                    var code = obj.code;
                    if (code == 0) {
                        alert("添加成功");
                        window.location.href = context + "/ckCompany/listByPage";
                    } else {
                        alert(obj.msg);
                    }
                }
            })
        }
    })

    /**
     * 上传机器码文件回调函数
     * @param result
     */
    function excelUploadSuccess(result) {
        $('.upload-list-text').html("<div class=\"upload-item\" data-id=\"0\"> <input type=\"text\" name=\"excelDeviceCode\" class=\"z-hide\" value='"+result+"'> <div class=\"head\"> <a class=\"name\" target=\"_blank\">" + "上传成功" + "</a> <div class=\"close fa fa-close\"></div> </div> </div>")
    }
</script>
</body>

</html>